<template>
    <div>
<van-nav-bar title="主页" left-text="前往" left-arrow @click-left="()=>{$router.push('/home')}" />
    <onSearch></onSearch>
    <van-grid :column-num="4">
  <van-grid-item v-for="item in catitemsApiData" :icon="item.image_src" :text="item.name" />
  <van-grid-item v-for="item in catitemsApiData" :icon="item.image_src" :text="item.name" />
</van-grid>
<div class="pp" style="   background-color: #4edfff;">
<div style="width: 180px;height: 380px; background: #fff;">
<img src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"alt="" style="width: 100%;height: 200px;">
<p>浏览上千</p>
<p>九成新游戏电脑便宜卖,品牌型号是戴尔2070s</p>
<p><span style="font-size: 19px;color: red;">￥4899</span><span style="margin-left: 80px;"></span>刚刚</p>
</div><div style="width: 180px;height: 330px; background: #fff;">
<img src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg"alt="" style="width: 100%;height: 154px;">
<p>浏览上千</p>
<p>九成新游戏电脑便宜卖,品牌型号是戴尔2070s</p>
<p><span style="font-size: 19px;color: red;">￥4899</span><span style="margin-left: 80px;"></span>刚刚</p>
</div><div style="width: 180px;height: 400px; background: #fff;">
<img src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg"alt="" style="width: 100%;height: 160px;">
<p>浏览上千</p>
<p>九成新游戏电脑便宜卖,品牌型号是戴尔2070s</p>
<p><span style="font-size: 19px;color: red;">￥4899</span><span style="margin-left: 80px;"></span>刚刚</p>
</div><div style="width: 180px;height: 340px; background: #fff;">
<img src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg"alt="" style="width: 100%;height: 190px;">
<p>浏览上千</p>
<p>九成新游戏电脑便宜卖,品牌型号是戴尔2070s</p>
<p><span style="font-size: 19px;color: red;">￥4899</span><span style="margin-left: 80px;"></span>刚刚</p>
</div><div style="width: 180px;height: 450px; background: #fff;">
<img src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-5.jpeg"alt="" style="width: 100%;height: 230px;">
<p>浏览上千</p>
<p>九成新游戏电脑便宜卖,品牌型号是戴尔2070s</p>
<p><span style="font-size: 19px;color: red;">￥4899</span><span style="margin-left: 80px;"></span>刚刚</p>
</div><div style="width: 180px;height: 430px; background: #fff;">
<img src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-6.jpeg"alt="" style="width: 100%;height: 180px;">
<p>浏览上千</p>
<p>九成新游戏电脑便宜卖,品牌型号是戴尔2070s</p>
<p><span style="font-size: 19px;color: red;">￥4899</span><span style="margin-left: 80px;"></span>刚刚</p>
</div>
</div>
    </div>
</template>

<script setup>
 const images = [
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
    ];
import onSearch from '@/components/onSearch.vue';
import {catitemsApi}from '@/api/api'
import { ref } from 'vue';
const catitemsApiData=ref([])
catitemsApi().then(res=>{
    console.log(res);
    catitemsApiData.value=res.data.message
})

</script>

<style lang="scss" scoped>
.pp{
    column-count: 2;
    column-gap: 10px;
    width: 100%;
    height: 1200px;
    margin: 0;padding: 5px;
    div{
        margin: 10px;
    }
}
</style>